<template>
     <div
            class="flex flex_center fontsize_20 transition_0_3"
            style="width: 700px; color: #fff; font-weight: bold"
          >
            <span class="p_10">{{ time.year }}</span>
            <span class=""> / </span>
            <span class="p_10">{{ U.toZero(time.month) }}</span>
            <span class=""> / </span>
            <span class="p_10">{{ U.toZero(time.day) }}</span>
            <span class="p_10 transition_0_3">{{ U.toZero(time.hour) }}</span>
            <span class="transition_0_3" :style="`opacity:${flag ? '1' : '0'}`">
              :
            </span>
            <span class="p_10 transition_0_3">{{ U.toZero(time.minute) }}</span>
            <span class="transition_0_3" :style="`opacity:${flag ? '1' : '0'}`">
              :
            </span>
            <span class="p_10 transition_0_3">{{ U.toZero(time.second) }}</span>
          </div>
</template>

<script>
export default {
  name:"NewTime",
  data(){
    return {
      time:{
        year:"2020",
        month:"01",
        day:"01",
        hour:"00",
        minute:"00",
        second:"00",
      },
      flag:false,
    }
  },
  created() {
    this.getTime();
  },
  methods: {
    getTime() {
      let _n = this.time.second;
      this.time = this.U.newTime();
      if (_n != this.time.second) {
        this.flag = true;
        setTimeout(() => {
          this.flag = false;
        }, 500);
      }
      requestAnimationFrame(() => {
        this.getTime();
      });
    },
  },
}
</script>

<style>

</style>